<template>

    <div class="nowplay-page-wrap" ref="nowplaying">
     <!-- 加载数据状态 -->
      <Loading :is-data="isData" :is-erro="isErro" @get-data="getData" :pull-down-msg="pullDownMsg"></Loading>
      <Scroller :handleToScroll="handleToScroll" :handleToTouchEnd="handleToTouchEnd" v-if="movieList.length" ref="scroller" :refresh="refresh">
        <div class="movie_list_wrapper" ref="movieList">
            <div v-for="item in movieList" :key="item.id" class="moive-list" @tap="ToMovieCinemaPage(item)">
              <div class="moive-img">
                <img :src="item.img | filterImg " alt/>
              </div>
              <div class="moive-content-wrap">
                <div class="moive-content-left-wrap">
                  <div class="moive-title">
                    <p>{{item.nm}}</p>
                    <img v-if="item.version==='v2d imax'" class="version" src="@/assets/images/2DIMAX.png" />

                    <img v-if="item.version==='v3d imax'" class="version" src="@/assets/images/3DIMAX.png" />

                    <img v-if="item.version==='imax'" class="version" src="@/assets/images/IMAX.png" />

                    <img v-if="item.version==='v3d'" class="version3d" src="@/assets/images/3D.png" />
                  </div>
                  <div class="moive-score" v-if="!item.globalReleased">
                    <span class="moive-src">{{item.wish}}</span>
                    <span>人想看</span>
                  </div>

                  <div class="moive-score" v-else-if="item.sc > 0">
                    <span>观众评&nbsp;</span>
                    <span class="moive-src">{{item.sc}}</span>
                  </div>

                  <div class="moive-score" v-else-if="item.sc == 0">
                    <span>暂无评分</span>
                  </div>

                  <div class="moive-actor">主演：{{item.star}}</div>

                  <div class="moive-actor">{{item.showInfo}}</div>
                </div>
                <div class="moive-buy-btn" v-if="item.sc != 0">购票</div>
                <div class="moive-buy-btn sell" v-else>预售</div>
              </div>
            </div>
            <div style="text-align:center;padding:10px 0;">{{pullUpMsg}}</div>
          </div>
      </Scroller>

    </div>

</template>
<script>

import { mapState } from 'vuex'
import Loading from '@/components/loading/loading'

export default {
  data () {
    return {
      isData: false,
      isErro: false,
      movieList: [],
      pullDownMsg: '',
      pullUpMsg: '',
      movieids: [],
      refresh: false
    }
  },
  computed: {
    ...mapState(['currentCity'])
  },
  components: {
    Loading
  },
  filters: {
    filterImg (value) {
      return value.replace('w.h', '128.180')
    }
  },
  mounted () {
    // 获取列表
    this.nowplayingList(this.currentCity.id)
  },
  methods: {

    ToMovieCinemaPage (item) {
      this.$router.push({ path: '/movieCinemaPage', query: { movieID: item.id } })
    },
    getAxios (id) {
      return this.axios({
        method: 'get',
        url: '/ajax/movieOnInfoList?token=&cityId=' + id + '&optimus_uuid=4A9FDA7016A011EA85234DD9863DF3BDCFF5DF9313024D1684E23E21CD5F7409&optimus_risk_level=71&optimus_code=10'
        // url: '/api/movieOnInfoList?cityId=' + id
        //  headers:'Content-Type:text/plain'
      })
    },
    // 下拉加载
    upGetAxios () {
      let movieids = this.movieids.splice(0, 10).join(',')
      return this.axios({
        method: 'get',
        url: '/ajax/moreComingList?token=&movieIds=' + movieids
      })
    },
    nowplayingList (id) {
      this.isData = true
      this.getAxios(id).then(res => {
        if (res.data.movieList.length > 0) { // 有数据
          this.movieList = res.data.movieList
          this.movieids = res.data.movieIds.slice(res.data.movieList.length) // id总计录
          this.isData = false
        }
      }).catch(err => {
        if (err) {
          setTimeout(() => {
            this.isData = false
            this.isErro = true
          }, 3000)
        }
      })
    },

    // 上拉刷新
    pullDownAxios (id) {
      this.getAxios(id).then(res => {
        if (res.data.movieList.length > 0) { // 有数据
          this.movieList = res.data.movieList
          this.movieids = res.data.movieIds.slice(res.data.movieList.length) // id总计录
          this.pullDownMsg = '已显示最新内容'
          setTimeout(() => {
            this.pullDownMsg = ''
          }, 2000)
        }
      }).catch(err => {
        if (err) {
          setTimeout(() => {
            this.isErro = true
          }, 3000)
        }
      })
    },
    // 下拉加载
    pullUpAxios () {
      this.upGetAxios().then(res => {
        if (res.data.coming.length > 0) {
          this.movieList = this.movieList.concat(res.data.coming)
          // 加载新数据后，在Dom节点挂载完成后，重新计算高度
          this.$nextTick(() => {
            this.refresh = true
          })
        }
      }).catch(err => {
        if (err) {
          setTimeout(() => {
            this.isErro = true
          }, 3000)
        }
      })
    },
    handleToScroll (pos) {
      this.refresh = false
      if (pos.y > 0) {
        this.pullDownMsg = '正在更新中'
      }
      // 上拉加载
      let mh = this.$refs.movieList.offsetHeight
      let sh = this.$refs.scroller.$el.offsetHeight
      if (-pos.y > (mh - sh) && this.movieids.length == 0) {
        this.pullUpMsg = '数据到底了'
      }
    },
    handleToTouchEnd (pos) {
      if (pos.y > 20) {
        this.pullDownAxios(this.currentCity.id)
      }
      // 上拉加载
      let mh = this.$refs.movieList.offsetHeight
      let sh = this.$refs.scroller.$el.offsetHeight
      if (-pos.y > (mh - sh) && this.movieids.length > 0) {
        this.pullUpAxios()
      } else {
        setTimeout(() => { this.pullUpMsg = '' }, 500)
      }
    },
    getData () {
      this.isErro = false
      this.nowplayingList(this.currentCity.id)
    }
  }
}
</script>
<style>
  .nowplay-page-wrap{
  height: 100%;
  overflow-y: hidden;
  }
  .el-message-box__wrapper .box{
  width: 65%;
  height: 25%;
  background: #ffffff;
  border-radius: 3px;
  padding: 20px 0;
  position: relative;
  }
  .box .el-message-box__title {
  text-align: center;
  font-size: 15px
  }
  .box .el-message-box__message{
  text-align: center;
  font-size: 14px;
  margin: auto 0;
  }
  .box .el-message-box__message span{
  color: #f03d37
  }
  .box .el-message-box__btns {
  padding: 0;
  text-align:center;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  }

  .box .el-message-box__btns button{
  background: #ffffff;
  color: #333;
  font-size: 12px;
  border: 1px solid #f2f2f2;
  /* flex: 1; */
  width: 50%;
  border-radius: 0px;
  text-align: center;

  }
  .box .el-message-box__btns button:nth-child(2){
  margin: 0;
  border-left: none;
  color: #f03d37

  }
  .movie_list_wrapper{
    padding: 0 15px;
    background: #fff;

  }

  .moive-list {
  width: 100%;
  background: #fff;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 5px 0;
  }
  .moive-img {
  flex-shrink: 0;
  width: 64px;
  height: 90px;
  }
  .moive-img img {
  width: 100%;
  height: 100%;
  }

  .moive-content-wrap {
  flex-grow: 1;
  padding: 12px 0;
  margin-left: 10px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #e8e8e8;
  }
  .moive-content-left-wrap {
  flex-grow: 1;
  }
  .moive-title {
  width: 180px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding-bottom: 2px;
  }
  .moive-title p {
  font-size: 16px;
  line-height: 18px;
  font-weight: bold;
  padding-right: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
  }
  .moive-score,
  .moive-actor {
  width: 210px;
  font-size: 13px;
  line-height: 16px;
  color: #666666;
  padding-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  }

  .moive-score {
  line-height: 15px;
  }
  .moive-src {
  color: #faaf00;
  font-size: 15px;
  font-weight: bold;
  }
  .moive-buy-btn {
  flex-shrink: 0;
  padding: 4px 10px;
  background: #f03d37;
  color: white;
  font-size: 13px;
  border-radius: 5px;
  }
  .version {
  width: 43px;
  height: 14px;
  }
  .version3d {
  width: 17px;
  height: 14px;
  }

  .sell{
  background-color: #3c9ee6
  }
</style>
